<!--  -->
<template>
<div class='home-page'>
    <div class="title">中铁建·国际城</div>
    <!-- 首页轮播图 -->
    <div class="swipe-box">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item,index) in swipeData.banner" :key="index">
                <img :src="item.pic.url" alt="">
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <!-- 社区活动 -->
    <div class="community flex">
        <div class="text">社区活动</div>
        <div class="all" @click="goToActiveList">
            <div>
                查看全部
            </div>
            <img src="../../assets/youjiantou.png" alt="">
        </div>
    </div>
    <!-- 社区活动横向列表 -->
    <div class="live-box">
        <div class="sliding-item" v-for="(item,index) in communityData" :key="index">
            <div class="sliding-item-box">
                <div class="top">
                    <img :src="item.pic.url" alt="">
                </div>
                <div class="content">
                    <div class="img_txt border">
                        <div class="left">
                            <p class="p1">07</p>
                            <p class="p2 text-cut">七月</p>
                        </div>
                        <div class="right">
                            <p class="p1 text-cut">{{item.title}}</p>
                            <p class="p2 text-cut">活动地址：{{item.address}}</p>
                            <p class="p2 text-cut">报名截止：{{item.activity_end_at}}</p>
                        </div>
                    </div>
                    <div class="bottom_msg">
                        <div class="left"> 
                            <span v-for="(items,index) in item.user" :key="index">
                                <img :src="items.avatar" alt="">
                            </span>
                            <!-- <span>
                                <img src="../../assets/2.png" alt="">
                            </span> -->
                            <b>{{item.user_count}}
                                <i>人参与</i>
                            </b>
                        </div>
                        <div class="right">立即参与</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 热点咨询 -->
    <div class="hot">
        <div class="text">热点咨询</div>
    </div>
    <div class="news">
        <div class="newslist border" v-for="(item,index) in newslistData" :key="index">
            <div class="left">
                <img :src="item.pics[0].url" alt="">
            </div>
            <div class="right">
                <p class="p1 text-cut">{{item.title}}</p>
                <p class="p2 text-cut">{{item.desc}}</p>
                <p class="p3">
                    {{item.created_at}}
                    <span>
                        <img src="../../assets/yan.png" alt="">
                        {{item.total_browse}}
                    </span>
                </p>
            </div>
        </div>
    </div>
    <!-- 更多新闻 -->
    <div class="more">
        <img src="../../assets/more.png" alt="" @click="goToHome">
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tabBar from '@/components/tabBar'
export default {
//import引入的组件需要注入到对象中才能使用
components: {
    tabBar
},
data() {
//这里存放数据
return {
    projectId:1
};
},
//监听属性 类似于data概念
computed: {
    swipeData(){
        return this.$store.state.swipeDatas
    },
    communityData(){
        return this.$store.state.communityDatas
    },
    newslistData(){
        return this.$store.state.newslistDatas
    },
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    goToActiveList(){
        this.$router.push({
            name:'activeList',
            
        })
    },
    goToHome(){
        this.$router.push({
            name:'home'
        })
    }
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.$store.dispatch('swipeData',{projectId:this.projectId})
    this.$store.dispatch('communityData',{projectId:this.projectId})
    this.$store.dispatch('newslistData',{projectId:this.projectId})
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.home-page{
    position: absolute;
    bottom: 5rem;
    top: 0;
    width: 37.5rem;
    overflow-y: auto;
    .title{
        font-size: 1.5rem;
        padding: 1.8rem 1.5rem;
    }
    //轮播图
    .swipe-box{
        height: 13rem;
        width: 34.5rem;
        margin-left: 1.5rem;
        position: relative;
        img{
            width: 100%;
            height: 100%;
            border-radius: .8rem;
        }
    }
    //社区活动
    .community{
        width: calc(100% - 3rem);
        margin-left: 1.5rem;
        padding: 2rem 0 0;
        .text{
            font-size: 2rem;
            color: #222;
            font-weight: 700;
            width: 30%;
        }
        .all{
            font-size: 1.3rem;
            color: #999daa;
            width: 70%;
            display: flex;
            justify-content: right;
            align-items: center;
            img{
                margin-left: .5rem;
                width: 1.2rem;
                height: 1.2rem;
            }
        }
    }
    .text-cut{
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .border:after {
        content: "";
        display: block;
        position: absolute;
        left: -50%;
        width: 200%;
        height: 0.026667rem;
        bottom: 0;
        background: #ededed;
        transform: scale(.5);
    }
    .live-box{
        display: flex;
        overflow-y: hidden;
        overflow-x: scroll;
        padding: 1.5rem;
        .sliding-item{
            max-width: 20rem;
            display: flex;
            margin-right: 1.5rem;
            border-radius: 0 0 .5rem .5rem;
            .sliding-item-box{
                width: 20rem;
                height: 21rem;
                .top{
                    width: 100%;
                    img{
                        width: 100%;
                        border-top-left-radius: .5rem;
                        border-top-right-radius: .5rem;
                    }
                }
                .content{
                    background: #fff;
                    padding: 1rem .8rem 1.2rem;
                    border-radius: 0 0 .5rem .5rem;
                    .img_txt{
                        display: flex;
                        position: relative;
                        padding-bottom: 1.2rem;
                        .left{
                            width: 3.2rem;
                            height: 4.2rem;
                            text-align: center;
                            border-radius: .5rem;
                            background: linear-gradient(180deg,rgba(255,74,0,.2),rgba(255,141,37,0) 100%);
                            .p1{
                                margin-top: .5rem;
                                font-size: 1.5rem;
                                font-weight: 700;
                                color: #24293a;
                            }
                            .p2{
                                margin-bottom: .2rem;
                                font-size: 1.2rem;
                            }
                        }
                        .right{
                            flex:1;
                            padding-left: 1rem;
                            min-width: 0;
                            .p1{
                                font-size: 1.3rem;
                                font-weight: 700;
                                margin-bottom: .8rem;
                            }
                            .p2{
                                color: #6e7383;
                                font-size: 1.2rem;
                            }
                        }
                    }
                    .bottom_msg{
                        display: flex;
                        padding-top: 1.2rem;
                        align-items: center;
                        .left{
                            flex: 1;
                            span{
                                img{
                                    width: 2rem;
                                    height: 2rem;
                                    object-fit: cover;
                                    border-radius: 50%;
                                    border: 1px solid #fff;
                                    margin-left: -1rem;
                                    vertical-align: middle;
                                    box-sizing: border-box;
                                }
                            }
                            span:first-child{
                                margin-left: 1rem;
                            }
                            b{
                                font-style: normal;
                                line-height: 2rem;
                                color: #ff6238;
                                i{
                                    color: #666;
                                    font-weight: 400;
                                    font-style: normal;
                                }
                            }
                        }
                        .right{
                            width: 5.9rem;
                            height: 2.2rem;
                            line-height: 2.2rem;
                            text-align: center;
                            background: linear-gradient(90deg,#ff4a00,#ff8d25);;
                            border-radius: 1rem;
                            color: #fff;
                            font-size: 1.2rem;
                        }
                    }
                }
            }
        }
    }
    .hot{
        padding: .5rem 1.5rem 0;
        background: #fff;
        .text{
            font-size: 2rem;
            color: #222;
            font-weight: 700;
            width: 30%;
        }
    }
    .news{
        padding: 0 1.5rem;
        background: #fff;
        .newslist{
            display: flex;
            position: relative;
            padding: 1.5rem 0;
            .left{
                img{
                    width: 12rem;
                    height: 8.5rem;
                    border-radius: .5rem;
                    object-fit: cover;
                }
            }
            .right{
                flex: 1;
                padding-left: 1.1rem;
                position: relative;
                min-width: 0;
                .p1{
                    font-size: 1.5rem;
                    font-weight: 700;
                    line-height: 3rem;
                }
                .p2{
                    font-weight: 500;
                    color: #6e7383;
                }
                .p3{
                    position: absolute;
                    bottom: 1rem;
                    color: #999daa;
                    left: .8rem;
                    right: 0;
                    span{
                        float: right;
                        img{
                            position: relative;
                            top: .35rem;
                            width: 1.6rem;
                            height: 1.6rem;
                        }
                    }
                }
            }
        }
    }
    .more{
        text-align: center;
        padding: 3rem 0 4rem;
        img{
            width: 10.5rem;
        }
    }
}
</style>